<template>
  <div class="main-content">
    <!--加入侧滑抽屉-->
    <SlideOverComponent
      :isOpen="isSlideOverOpen"
      :selectedData="selectedData"
      @update:isOpen="handleSlideOverToggle"
    />

    <div class="messages-container" ref="messagesContainer">
      <ChatBubble
        v-for="(msg, index) in messages"
        :key="index"
        :text="msg.text"
        :isUser="msg.isUser"
        :sql="msg.sql"
        :chart="msg.chart"
        :table="msg.table"
      />

      <div v-if="loading" class="loading-overlay">
        <Loader />
      </div>
    </div>
    <MessageInput
      @message-sent="handleMessage"
      @file-upload="handleUpload"
      :loading="loading"
    />
    <UploadFile
      :showModal="uploadfiles"
      @closemodel="handleCancel"
      :randomId="randomId"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import MessageInput from "./MessageInput.vue";
import ChatBubble from "./ChatBubble.vue";
import UploadFile from "./upload/UploadFile.vue";
import Loader from "./Loaders/LoaderComponent1.vue"; // 引入Loader组件
import SlideOverComponent from "./AnalysisSlide.vue"; // 引入SlideOverComponent

export default {
  name: "MainContent",

  computed: {
    analysis() {
      if (this.messages.length > 0) {
        const lastMessage = this.messages[this.messages.length - 1];
        console.log("分析结果", lastMessage.analysis);
        return lastMessage.analysis || null;
      }
      return null;
    },
  },

  components: {
    MessageInput,
    ChatBubble,
    UploadFile,
    Loader,
    SlideOverComponent,
  },

  props: {
    messages: Array,
    loading: Boolean,
    uploadfiles: Boolean,
  },

  data() {
    return {
      isSlideOverOpen: false,
      randomId: this.generateRandomId(), // 初始化 randomId
    };
  },

  computed: {
    ...mapState({
      selectedData: (state) => state.selectedData,
    }),
  },

  watch: {
    selectedData(newData) {
      if (newData) {
        this.isSlideOverOpen = true;
        console.log("点击发生变化", this.isSlideOverOpen);
      }
    },
  },

  methods: {
    handleMessage(newMsg) {
      this.$emit("message-sent", newMsg);
    },

    handleUpload() {
      this.$emit("file-upload");
    },

    handleCancel() {
      this.$emit("closemodel");
    },

    scrollToBottom() {
      const container = this.$refs.messagesContainer;
      container.scrollTop = container.scrollHeight;
    },

    handleSlideOverToggle(newVal) {
      this.isSlideOverOpen = newVal;
    },

    generateRandomId() {
      return Math.random().toString(36).substring(2, 10);
    },
  },
};
</script>

<style>
.main-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0px;
  padding-bottom: 0px;
  width: 100%;
  box-sizing: border-box;
}

.messages-container {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden; /* 添加这一行 */
  max-height: calc(100vh - 200px);
  width: 100%;
}

.loading-overlay {
  position: fixed;
  top: 40%;
  left: 55%;
  transform: translate(-50%, -50%);
  z-index: 1000; /* 确保加载动画在最前 */
}

.smart-circle {
  position: fixed;
  top: 80%;
  left: 90%;
  transform: translate(-50%, -50%);
  cursor: pointer; /* 鼠标悬浮时的手型图标 */
  z-index: 1000; /* 确保悬浮窗在其他元素之上 */
}
</style>
